<!--  -->
<template>
  <div class="phone_container">
    <div class="food_container">
      <img src="../assets/images/desk.png" class="desk">
      <img src="../assets/images/lunch.png" class="lunch">
      <img src="../assets/images/food_total.png" class="food_total">
      <img src="../assets/images/parents_gear.png" class="gear">
    </div>
    <div class="call_container">
      <router-link to="/gacha/">
        <el-button class="backtogacha" type="small">返回主页</el-button>
      </router-link>
      <div class="call_content son">
        <img src="../assets/images/son.png" class="son_img">
        <img src="../assets/images/callword.png" class="callword">
      </div>
      <div class="call_content parents">
        <img src="../assets/images/parents_gear.png" class="gear">
        <img src="../assets/images/parents.png" class="parents_img">
        <div class="call_input">
          <el-input placeholder="请输入手机号" v-model="phone" type="number" style="width:60%"></el-input>
          <el-button type="primary" style="width:60%;margin-top:10px" @click="callPhone">呼叫</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        phone: ""
      };
    },

    components: {},

    computed: {},


    methods: {
      callPhone() {
        var phoneNumber = this.phone
        window.location.href = 'tel://' + phoneNumber
      }
    }
  }
</script>
<style scoped lang="less">
  .phone_container {
    width: 100%;
    height: 100%;
    position: relative;

    @keyframes appear {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .lunch,
    .desk,
    .food_total,
    .gear,
    .callword {
      opacity: 0;
      position: absolute;
      animation: appear 2s forwards;

    }

    .lunch {
      width: 70%;
      top: 40%;
      z-index: 1;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 1s;
    }

    .desk {
      width: 100%;
      top: 60%;
      left: 0;
      z-index: 2;
      animation-delay: 1s;
    }

    .food_total {
      width: 100%;
      top: 60%;
      left: 0;
      z-index: 3;
      animation-delay: 3s;
    }

    .gear {
      width: 100%;
      top: 40%;
      left: 0;
      opacity: 0;
    }

  }

  .food_container {
    width: 100%;
    height: 100%;
    background: url("../assets/images/foodbg.png");
    background-size: 100% 100%;
    animation: move_left 3s forwards;
    position: absolute;
    animation-delay: 5s;
  }

  @keyframes move_left {
    from {
      left: 0;
    }

    to {
      left: -100%;
    }
  }

  .call_container {
    width: 100%;
    height: 100%;
    animation: move_right 3s forwards;
    position: absolute;
    animation-delay: 5s;
    right: -100%;

    @keyframes move_right {
      from {
        right: -100%;
      }

      to {
        right: 0;
      }
    }

    .backtogacha {
      position: fixed;
      right: 50px;
      top: 10px;
      z-index: 2;
    }

    .call_content {
      width: 100%;
      height: 50%;

    }

    .son_img,
    .gear,
    .parents_img,
    .callword,
    .call_input {
      opacity: 0;
      animation: appear 2s forwards;
    }

    .gear {
      animation-delay: 7s;
    }

    .parents_img {
      animation-delay: 8s;
    }

    .callword {
      animation-delay: 9s;
    }

    .call_input {
      animation-delay: 10s;
    }


    .son {
      background: url("../assets/images/son_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;

      .son_img {
        position: absolute;
        bottom: 0;
        width: 80%;
        left: 70%;
        transform: translateX(-50%);
      }

      .callword {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;

        z-index: 2;
      }
    }

    .parents {
      background: url("../assets/images/parents_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;

      .call_input {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
      }

      .gear {
        width: 100%;
        position: absolute;
        bottom: 50px;
        left: 0;
      }

      .parents_img {
        position: absolute;
        bottom: 0;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>